<template>
  <div class="libs">
    <div ref="useCharts" class="use-charts" />
    <div ref="libsCharts" class="libs-charts" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getStockApi, getAreaApi } from '@/api'
export default {
  data() {
    return {
      stockList: [], // 库存数据
      rigthData: [
        { value: 348, name: '拣货区' },
        { value: 487, name: '出库区' },
        { value: 677, name: '暂存库区' },
        { value: 126, name: '进货暂存区' },
        { value: 298, name: '出货暂存区' }
      ]
    }
  },
  async created() {
    const res = await getAreaApi()
    this.zhan_wu_shu_ju = res.data
    this.getStock()
    this.getRight()
  },
  mounted() {
  },
  methods: {
    // 获取库存数据
    async getStock() {
      const { data } = await getStockApi()
      this.stockList = data.data
      this.$nextTick(() => {
        this.initEchartsTwo()
      })
    },
    initEchartsTwo() {
      const twoCharts = echarts.init(this.$refs.useCharts)
      const option = {
        title: {
          text: '库存使用情况',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}:\n {d}%'

        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              formatter: '{b} : {d}%'
            },
            emphasis: {
              shadowBlur: 30,
              shadowOffsetX: 0,
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.stockList,
            itemStyle: {
              normal: {
                color: function(colors) {
                  const colorList = [
                    '#e4dbda',
                    '#ffaa00'
                  ]
                  return colorList[colors.dataIndex]
                }
              }
            }
          }
        ]
      }

      twoCharts.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', () => {
        twoCharts.resize()
      })
    },
    // 第二个饼图
    getRight() {
      const arrPie = [
        { value: 348, name: '拣货区' },
        { value: 487, name: '出库区' },
        { value: 677, name: '暂存库区' },
        { value: 126, name: '进货暂存区' },
        { value: 298, name: '出货暂存区' }
      ]
      const chartBox2 = echarts.init(this.$refs.libsCharts)
      const option = {
        title: {
          text: '库区使用情况',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}:\n {d}%',
          backgroundColor: 'rgba(0,0,0,0.4)',
          borderColor: 'gray',
          textStyle: {
            color: '#fff' // 设置文字颜色
          }
        },
        color: ['#0076ff', '#52d4f3', '#5d7092', '#ffb200', '#ff7100'], // 图表颜色
        // 右侧显示的数据
        legend: {
          orient: 'vertical',
          // selectedMode: false, // 设置关闭
          itemHeight: 8, // 前面圆点的大小
          right: '200', // 距离右边的距离
          top: '100', // 在 y 轴中间
          icon: 'circle', // 文字前面的圆点
          formatter: function(name) { // 添加
            let total = 0
            let target
            for (let i = 0; i < arrPie.length; i++) {
              total += arrPie[i].value
              if (arrPie[i].name === name) {
                target = arrPie[i].value
              }
            }
            var arr = [
              '{a|' + name + '}',
              '{b|' + ((target / total) * 100).toFixed(2) + '%}',
              '{c|' + target + '}'
            ]
            return arr.join('  ')
          },
          textStyle: { // 添加
            padding: [8, 0, 0, 0],
            rich: {
              a: {
                fontSize: 12,
                width: 110
              },
              b: {
                fontSize: 12,
                width: 70
              },
              c: {
                fontSize: 12
              }
            }
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '80%', // 饼图大小
            center: ['30%', '50%'], // 饼图位置
            label: {
              show: true,
              position: 'inner', // 数值显示在内部
              formatter: '{c}', // 格式化数值百分比输出
              color: '#fff'
            },
            data: this.rigthData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      chartBox2.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', () => {
        chartBox2.resize()
      })
    }
  }
}
</script>

<style lang="scss" scope>
  // .inout-charts {
  //   margin-top: 25px;
  //   height: 500px;
  //   background: #fff;
  //   box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  //   border-radius: 12px;
  //   padding: 25px;
  //   .subject {
  //   font-size: 16px;
  //   font-family: PingFangSC-Semibold, PingFang SC;
  //   font-weight: 600;
  //   color: #332929;
  //   line-height: 22px;
  //   }
  //   #echart_bar {
  //     width: 100%;
  //     height: 90%;
  //   }
  // }
  .libs {
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .use-charts {
      width: 30%;
      height: 354px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      border-radius: 12px;
      padding: 25px;
      margin-right: 30px;
    }
    .libs-charts {
      width: 70%;
      height: 354px;
      background: #fff;
      box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      border-radius: 12px;
      padding: 25px;
    }
  }
</style>
